﻿<style>
    .angular-ui-tree-handle {
        background: #f8faff;
        border: 1px solid #dae2ea;
        color: #7c9eb2;
        padding: 10px 10px;
        line-height: 26px;
    }

    .angular-ui-tree-handle:hover {
        color: #438eb9;
        background: #f4f6f7;
        border-color: #dce2e8;
    }

    .angular-ui-tree-placeholder {
        background: #f0f9ff;
        border: 2px dashed #bed2db;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    tr.angular-ui-tree-empty { height: 100px }

    .group-title {
        background-color: #687074 !important;
        color: #FFF !important;
    }

    .tree-node {
        border: 1px solid #dae2ea;
        background: #f8faff;
        color: #7c9eb2;
    }

    .nodrop { background-color: #f2dede; }

    .tree-handle {
        padding: 10px;
        background: #428bca;
        color: #FFF;
        margin-right: 10px;
    }

    .angular-ui-tree-placeholder {
        background: #f0f9ff;
        border: 2px dashed #bed2db;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .ui.fluid.dropdown {
        min-width: 200px;
    } 
    body {
        overflow-x: hidden;
    }
</style>
<script type="text/ng-template" id="nodes_renderer.html">
    <div ui-tree-handle class="tree-node tree-node-content">
        <div class="row">
            <div class="col-sm-3">
                <a class="btn btn-success btn-xs waves-effect" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)" style="margin-right:5px;">
                    <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
                </a>
                <a ng-href="{{node.Url}}" style="font-size:16px;" target="_blank">{{node.Id}}：{{node.GroupName}}</a>
            </div>
            <div class="col-sm-7">
                <div class="btn-group">
                    <a class="pull-right btn btn-danger waves-effect" data-nodrag ng-href="#/group/user/{{node.Id}}?appid={{appid}}">
                        管理用户
                    </a>
                    <a class="pull-right btn btn-info waves-effect" data-nodrag ng-href="#/group/role/{{node.Id}}">
                        角色
                    </a>
                    <a class="pull-right btn btn-primary waves-effect" data-nodrag ng-href="#/group/apps/{{node.Id}}">
                        配置应用
                    </a>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="btn-group">
                    <a class="pull-right btn btn-danger waves-effect" data-nodrag ng-click="del(this)">
                        <span class="glyphicon glyphicon-remove"></span>
                    </a>
                    <a class="pull-right btn btn-info waves-effect" data-nodrag ng-click="edit(node)">
                        <span class="glyphicon glyphicon-edit"></span>
                    </a>
                    <a class="pull-right btn btn-primary waves-effect" data-nodrag ng-click="newSubItem(this)">
                        <span class="glyphicon glyphicon-plus"></span>
                    </a>
                    <a class="pull-right btn btn-success waves-effect" data-nodrag ng-href="#/group/details/{{node.Id}}">
                        <span class="zmdi zmdi-collection-text"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}" class="animated fadeIn">
        <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'"></li>
    </ol>
</script>
<h1>用户组管理</h1>
<div class="row">
    <div class="col-md-12">
        <div class="form-inline m-b-5">
            <div class="btn-group">
                <button class="btn btn-success waves-effect" ng-click="expandAll()">展开/收起所有</button>
                <button class="btn btn-info waves-effect" ng-click="newItem()">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
                <button class="btn btn-primary waves-effect" ng-click="findNodes()">
                    <span class="glyphicon glyphicon-refresh"></span>
                </button>
            </div>
            <div class="input-group">
                <span class="input-group-addon">选择应用：</span>
                <div class="ui fluid search selection dropdown apps">
                    <input name="apps" type="hidden" id="apps">
                    <i class="dropdown icon"></i>
                    <div class="default text">选择应用</div>
                    <div class="menu">
                        <div class="item" ng-repeat="item in apps track by $index" data-value="{{item.AppId}}">{{item.AppName}}</div>
                    </div>
                </div>
            </div>
            <div class="pull-right">
                <div class="input-group">
                    <span class="input-group-addon">
                        搜索：
                    </span>
                    <div class="fg-line">
                        <input ng-model="query" ng-change="findNodes()" type="search" class="form-control pull-right" placeholder="搜索">
                    </div>
                </div>
            </div>
        </div>
        <div data-ui-tree="treeOptions" id="tree-root">
            <ol data-ui-tree-nodes ng-model="data" class="animated fadeIn">
                <li data-ng-repeat="node in data" data-ui-tree-node ng-include="'nodes_renderer.html'" ng-show="visible(node)"></li>
            </ol>
        </div>
    </div>
</div>

<div id="modal" class="modal">
    <div class="container-fluid" style="margin: 15px 0;">
        <form class="bgm-white">
            <div class="input-group">
                <span class="input-group-addon">
                    用户组名：
                </span>
                <div class="fg-line">
                    <input type="text" class="form-control" id="group-name" ng-model="group.GroupName"/>
                </div>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-info waves-effect" ng-click="submit(group)">确认</button>
                <button type="button" class="btn btn-danger waves-effect" ng-click="closeAll()">取消</button>
            </div>
        </form>
    </div>
</div>